
function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log(`Rendering ${WrappedComponent.name}`);
    return <WrappedComponent {...props} />;
  };
}


function DataLoader({ render }) {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
  	let apiurl = 'https://api.restful-api.dev/objects'
    fetch(apiurl)
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return data ? render(data) : <p>Loading...</p>;
}


function useWindowSize() {
  const [size, setSize] = React.useState([window.innerWidth, window.innerHeight]);

  React.useEffect(() => {
    function handleResize() {
      setSize([window.innerWidth, window.innerHeight]);
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}



function ARP() {
  const [width, height] = useWindowSize();

  return (
    <div>
      <p>Window size: {width} x {height}</p>
      <DataLoader
        render={data => (
          <div>
            <h1>{data.title}</h1>
            <p>{data.description}</p>
          </div>
        )}
      />
    </div>
  );
}


const ARP_Test = withLogging(ARP)